<template>
  <div class="top">
    <div style="float:left;width:20%;">
      <img style="float:right;margin-right:10px;width:60%" src="../assets/img/title-top.png" alt />
    </div>

    <div style="float: right;width:60%;margin-top:10px;">
      <div style="float:left;width:20%">
        <el-dropdown>
          <span class="el-dropdown-link">
            Download
            <i v-if="onIcon" class="el-icon-arrow-down el-icon--right"></i>
            <i v-if="!onIcon" class="el-icon-arrow-up el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>Manual</el-dropdown-item>
            <el-dropdown-item>GenAs-GBS</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div style="float:left;width:20%">
        <el-dropdown>
          <span class="el-dropdown-link">
            Service
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div style="padding:0 20px;">
              <el-collapse v-model="activeName" accordion>
                <el-collapse-item title="Experimental design" name="1">
                  <el-dropdown-item>Population genetics</el-dropdown-item>
                  <el-dropdown-item>Requencing</el-dropdown-item>
                  <el-dropdown-item>Metagenome</el-dropdown-item>
                  <el-dropdown-item>Microbiome</el-dropdown-item>
                </el-collapse-item>
                <el-collapse-item title="Data support" name="2">
                  <el-dropdown-item>GBS data set</el-dropdown-item>
                  <el-dropdown-item>SNP data set</el-dropdown-item>
                  <el-dropdown-item>Microsatellite data set</el-dropdown-item>
                  <el-dropdown-item>Gene sequence data set</el-dropdown-item>
                </el-collapse-item>
                <el-collapse-item title="Article support" name="3">
                  <el-dropdown-item>Article embellishment</el-dropdown-item>
                  <el-dropdown-item>Article revision</el-dropdown-item>
                  <el-dropdown-item>Article writing</el-dropdown-item>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div style="float:left;width:20%">
        <el-dropdown>
          <span class="el-dropdown-link">
            Support
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin:10px;">
            <div style="padding:0 20px;">
              <el-collapse v-model="activeName" accordion style="margin:10px;width:500px;">
                <el-collapse-item title="Authorized company" name="1">
                  <el-dropdown-item>
                    China,
                    <br />Hangzhou Jixin Technology Co., Ltd
                    Tax Identification Number/Social Credit Code, 91330102MA28R3FJ4M
                    Account Number, 571910627810802
                    Bank, China Merchants Bank Hangzhou branch Qingchun sub-branch
                    Phone,
                    E-mail,
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div>
                      Korea，
                      <br />kim’s company in korea.
                    </div>
                  </el-dropdown-item>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div style="float:left;width:20%;">
        <el-dropdown>
          <span class="el-dropdown-link">
            Pricing
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div style="padding:0 20px;">
              <el-collapse v-model="activeName_price" accordion>
                <el-collapse-item title="GeneAs - GBS" name="1"></el-collapse-item>
                <el-collapse-item title="Stand-alone version, Free update" name="2">
                  <el-dropdown-item>CNY, ¥1800.00</el-dropdown-item>
                  <el-dropdown-item>USD, $280.00</el-dropdown-item>
                  <el-dropdown-item>KPW, ₩300,600.00</el-dropdown-item>
                  <el-dropdown-item>EUR, €225.00</el-dropdown-item>
                </el-collapse-item>
                <el-collapse-item title="Data support" name="3">
                  <el-dropdown-item>Please e-mail to ………</el-dropdown-item>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div style="clear:both;"></div>
    <div style="text-align:center;">
      <h1
        style="margin-top:150px;color:white;font-size:40px;"
      >We make your research easier and save you more time to think</h1>
    </div>

    <h3 style="color:white;margin-top:50px;margin-left:20%;">USA, Probiotechservice LLC</h3>
    <h6
      style="color:white;margin-top:10px;margin-left:20%;"
    >3326 Lincoln Way Suite103-218, Ames, IA 50014</h6>
    <h6 style="color:white;margin-top:10px;margin-left:20%;">Social Credit Code</h6>
    <h6 style="color:white;margin-top:10px;margin-left:20%;">Account number</h6>
    <h6 style="color:white;margin-top:10px;margin-left:20%;">Bank</h6>
    <h6 style="color:white;margin-top:10px;margin-left:20%;">Phone</h6>
    <h6 style="color:white;margin-top:10px;margin-left:20%;">Email</h6>

    <div style="text-align:center;margin-top:40px;">
      <button id="btn" class="btnStyle">Come</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      onIcon: true,
      activeName: "1",
      activeName_price: "2"
    };
  }
};
</script>
<style>
.top {
  width: 100%;
  height: 600px;
  background-color: #242637;
  /* text-align: center; */
  padding-top: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
span:hover {
  color: #999;
}

.btnStyle {
  background-color: #242637;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 5px;
}
button:hover{
  background-color: #fff;
  color: #242637;
}
</style>